/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="miaosha">
		<view class="head">
			<view class='head-img' @click='back'>
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>活动详情</text>
		</view>
		<view class="banner">
			<image class="banner-bg" src="/static/banner.png" mode=""></image>
			<view class="banner-bg-mask"></view>
			<view class="ms-time">
				<text class="ms-time-start">10:00 正在抢购</text>
				<text class="ms-time-end">本场距离结束 20:21:18</text>
			</view>
			<view class="banner-img">
				<image src="/static/banner.png"></image>
				<view class="img-mask">
					<text class="ms-price"><text style="font-size: 26upx;">￥</text>256</text>
					<text class="price"><text style="font-size: 26upx;">￥</text>400</text>
					<view class="buy-now">立即抢购</view>
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav-item" @click="chooseNav(1)">
				<text :class="navIndex==1?'nav-ac':''">正在抢购</text>
			</view>
			<view class="nav-item" @click="chooseNav(2)">
				<text :class="navIndex==2?'nav-ac':''">即将开始</text>
			</view>
			<view class="nav-item" @click="chooseNav(3)">
				<text :class="navIndex==3?'nav-ac':''">更多秒杀</text>
			</view>
		</view>
		<view class="shop-list">
			<view class="shop-item" v-for="(item,index) in shopData" :key='index' @click="toDetail">
				<image :src="item.img" mode=""></image>
				<view class="item-right">
					<text class="item-name">{{item.name}}</text>
					<text v-if="navIndex!=2" class="item-time">{{item.time}}</text>
					<text v-if="navIndex==2" class="item-time">本场距离秒杀开始 21:21:32</text>
					<text class="ms-price"><text style="font-size: 26upx;">￥</text>{{item.msPrice}}</text>
					<text class="price"><text style="font-size: 26upx;">￥</text>{{item.price}}</text>
					<view class="buyNow">立即购买</view>
				</view>
			</view>
			
		</view>
		<FootMenu navIndex='3'/>
		<top-view></top-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navIndex:1,
				shopData:[
					{
						img:'/static/banner.png',
						name:'短款连帽卫衣女春秋装2018新 款韩版长松chic早秋上衣潮薄 ',
						time:'本场距离结束 21:21:32',
						price:400,
						msPrice:256,
					},
					{
						img:'/static/banner.png',
						name:'亲爱的热爱的ins童年同款情侣手表',
						time:'本场距离结束 21:21:32',
						price:400,
						msPrice:256,
					},
					{
						img:'/static/banner.png',
						name:'短款连帽卫衣女春秋装2018新 款韩版长松chic早秋上衣潮薄 ',
						time:'本场距离结束 21:21:32',
						price:400,
						msPrice:256,
					}
				]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			chooseNav(type){
				this.navIndex = type
			},
			toDetail(){
				uni.navigateTo({
					url:'miaoshaDetail?type='+this.navIndex
				})
			}
		},
		created(){
			
		}
	}
</script>

<style scoped>
	.miaosha{
		width: 750upx;
		height: auto;
		display: table;
		margin-bottom: 110upx;
	}
	.head{
		width: 750upx;
		height: 124upx;
		position: fixed;
		z-index: 20;
		background: #FFFFFF;
	}
	.head-img{
		width: 79upx;
		height: 80upx;
		margin-top: 44upx;
		float: left;
	}
	.head image{
		width: 30upx;
		margin-left: 29upx;
		margin-top:20upx;
		height: 30upx;
	}
	.head text{
		float: left;
		font-size: 30upx;
		font-weight: bold;
		line-height: 60upx;
		margin-top: 52upx;
	}
	.banner{
		margin-top: 124upx;
		width: 750upx;
		height: 800upx;
		position: relative;
	}
	.banner-bg{
		width: 750upx;
		height: 655upx;
		position: absolute;
	}
	.banner-bg-mask{
		width: 750upx;
		height: 655upx;
		background: rgba(0,0,0,0.5);
		position: absolute;
	}
	.ms-time{
		width: 690upx;
		height: 120upx;
		margin-left: 30upx;
		position: absolute;
	}
	.ms-time-start{
		height: 120upx;
		float: left;
		color: #FFFFFF;
		font-size: 40upx;
		font-weight: bold;
		line-height: 120upx;
	}
	.ms-time-end{
		height: 120upx;
		float: right;
		color: #FFFFFF;
		line-height: 120upx;
		font-size: 28upx;
	}
	.banner-img {
		position: absolute;
		width: 690upx;
		height: 627upx;
		margin-top: 120upx;
		left: 30upx;
	}
	.banner-img image{
		position: absolute;
		width: 690upx;
		height: 627upx;
	}
	.img-mask{
		position: absolute;
		width: 690upx;
		height: 80upx;
		bottom:0upx;
		background: rgba(0,0,0,0.5);
	}
	.banner-img .ms-price{
		font-size: 34upx;
		color: #55A0FF;
		float: left;
		line-height: 80upx;
		margin-left: 49upx;
		font-weight: bold;
	}
	.banner-img .price{
		font-size: 26upx;
		color: #999999;
		float: left;
		margin-left: 22upx;
		text-decoration: line-through;
		line-height: 90upx;
	}
	.banner-img .buy-now{
		width: 136upx;
		height: 48upx;
		border-radius: 20upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		text-align: center;
		line-height: 48upx;
		margin-top: 16upx;
		margin-right: 44upx;
		font-size: 24upx;
		color: #FFFFFF;
		float: right;
	}
	.nav{
		width: 650upx;
		height: 60upx;
		padding: 0 50upx;
		/* background: #09BB07; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.nav-item{
		width: 200upx;
		flex-direction: row;
		justify-content: center;
		display: flex;
		height: 60upx;
	}
	.nav-item text{
		font-size: 28upx;
		color: #333333;
		height: 40upx;
	}
	.nav-ac{
		color: #54B0FF !important;
		border-bottom: #54B0FF solid 4upx;
	}
	.sanjiao{
		width: 0upx;
		height: 0upx;
		float: right;
		margin-right: 25%;
		border: 10upx solid transparent;
		border-top-color: #FFFFFF;
		margin-top: 14upx;
		margin-left: 10upx;
	}
	
	.shop-list {
		width: 750upx;
		height: auto;
		display: table;
	}
	.shop-item{
		width: 690upx;
		height: 260upx;
		margin:40upx 30upx;
	}
	.shop-list image{
		width: 260upx;
		height: 260upx;
		float: left;
	}
	.item-right{
		width: 400upx;
		margin-left: 30upx;
		float: left;
		height: 260upx;
	}
	.item-name{
		font-size: 28upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin-top: 20upx;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.item-time{
		width: 100%;
		display: block;
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
		font-family: Microsoft YaHei Regular;
		color: rgba(248,102,28,1);
	}
	.shop-list .ms-price{
		font-size: 30upx;
		color: #55A0FF;
		float: left;
		line-height: 60upx;
		}
	.shop-list .price{
		font-size: 24upx;
		color: #999999;
		float: left;
		margin-left: 22upx;
		text-decoration: line-through;
		line-height: 60upx;
	}
	.shop-list .buyNow{
		width: 136upx;
		height: 48upx;
		border-radius: 20upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		text-align: center;
		line-height: 48upx;
		margin-top: 40upx;
		font-size: 24upx;
		color: #FFFFFF;
		float: right;
	}
</style>
